
<{php}>
if(isset($config['funcat_index_seo_title']['cvalue'])){
$title = $config['funcat_index_seo_title']['cvalue'];
}
if(isset($config['funcat_index_seo_keywords']['cvalue'])){
$keywords = $config['funcat_index_seo_keywords']['cvalue'];
}
if(isset($config['funcat_index_seo_desc']['cvalue'])){
$description = $config['funcat_index_seo_desc']['cvalue'];
}
<{/php}>

<{include file="../template/public/head.html"}>
<link rel="stylesheet" type="text/css" href="/static/css/css.css" />
<script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".hover-fadeIn").mouseover(function (){
            $(this).children('.img-hover-a').hide();
        }).mouseout(function (){
            $(".img-hover-a").show();
        });
    })
</script>
<style type="text/css">
    .full {  width: 100%;  height: 100%;  }
    .page-control {  position: absolute;  top: 50%;  width: 56px;  height: 100px;  margin-top: -50px;  }
    .left {  left: 0;  }
    .right {  right: 0; }
    .about-arrow{ font-size: 50px; clip: auto; overflow: visible; }
    .about-arrow img{ opacity: 0.8; }
    .about-arrow img:hover{ opacity: 1; }
    .bg{ background-color: white; border: 1px solid #eaedf2; }
    .pd-0{padding:0;}

		.pro-banner{
					background:url(<{if condition="isset($config.product_funcat_banner.cvalue)"}><{$config.product_funcat_banner.cvalue}><{/if}>);
					background-size:100% 100%;
				}
    @media (max-width: 1200px) {
        .pro-banner{
            background: url(<{if condition="isset($config.product_funcat_banner.cvalue)"}><{$config.product_funcat_banner.cvalue}><{/if}>) no-repeat center center !important;
			display:none;
        }
    }
    @media (max-width:767px){

        .hover-fadeIn .img-hover{
            opacity: 1;
            position:static;
        }
        .hover-fadeIn .hover-text{
            opacity: 1;
            transform: scale(1,1);
        }
        .hover-fadeIn .hover-text a:first-child{
            opacity:1;
            display:inline;
        }
        .hover-fadeIn .hover-text a {
            display:none;
            color:#666;
        }

    }
</style>


<!-- header-->
<!-- pro_top -->
<{include file="../template/public/union_nav.html"}>
<script>
    $('link').each(function(){
        if($(this).attr('href').indexOf("css/style.css")>0){
            $(this).remove();
            return false;
        }
    });
</script>

<div class="container-fluid">
    <div class="row">
        <div class="banner pro-banner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-7">
                        <div class="text">
                            <h1 class="white"><{if condition="isset($config.product_funcat_title.cvalue)"}><{$config.product_funcat_title.cvalue}><{/if}></h1>
                            <p><{if condition="isset($config.product_funcat_desc.cvalue)"}><{$config.product_funcat_desc.cvalue}><{/if}></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section>
    <{php}>
    $products = $query->getProductsForFuncat();
    $allProductsById = $query->getAllProduct();

    <{/php}>
    <{php}>$productCats = $query->getProductCat('fun');<{/php}>
    <div class="tab-container pro-tab-container hidden-xs jq_tab" id="jq_tab_1" >
        <ul class="nav nav-tabs center-block text-center jq_tab_fade" role="tablist" data-env="jq_tab_1" >
            <{volist name="productCats" id="item"}>
            <li role="presentation" data-env="jq_tab_1"><a href="#" class="btn btn-default btn-label" data-fade="#tab-<{$item.id}>"><{$item.name}></a></li>
            <{/volist}>
        </ul>
        <div class="tab-content" data-env="jq_tab_1">
            <{volist name="productCats" id="item"}>
            <div role="tabpanel" class="tab-pane" id="tab-<{$item.id}>">

                <div class="container-fluid pro-sec">
                    <div class="row">
                        <div class="tab-slide center-block">
                            <div class="collapse tab-toggle in clearfix" id="c1">
                                <div class="sec-desc clearfix center-block text-center">
                                    <ul class="list-unstyled">
                                        <{if condition="(!empty($item.sub))"}>

                                        <{volist name="$item.sub" id="cat"}>
                                        <li id="right_show_list" ><h3 class="inactive"><{$cat.name}></h3>
                                            <ul id="right_show" >
                                                <{if condition="(isset($products[$cat['id']]))"}>
                                                <{volist name="$products[$cat['id']]" id="in"}>
                                                <li><a href="<{php}> echo $query->U('index/product/product/id/'.$in,true);<{/php}>"><{$allProductsById[$in]['name']}></a></li>
                                                <{/volist}>
                                                <{/if}>
                                            </ul>
                                        </li>
                                        <{/volist}>
                                        <{/if}>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <{/volist}>
            <script type="text/javascript">
                $(document).ready(function() {
                    var hov_li=$(".jq_tab_fade li");
                    $(".jq_tab_fade").children('').mouseover(function (){
                        $(".tab-content").find(".list-unstyled").children('li').children('ul').hide();
                        $(".tab-content").find(".list-unstyled").children('li').children('h3').removeClass('inactives');
                    });

                    $('.inactive').click(function(){
                        if($(this).siblings('ul').css('display')=='none'){
                            $(this).parent('li').siblings('li').removeClass('inactives');
                            $(this).parent('li').siblings('li').children('').removeClass('inactives');
                            $(this).parent('li').siblings('li').children('ul').hide();
                            $(this).addClass('inactives');
                            $(this).siblings('ul').slideDown(100).children('li');
                            if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
                                $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
                                $(this).parents('li').siblings('li').children('ul').slideUp(100);

                            }
                        }else{
                            //控制自身变成+号
                            $(this).removeClass('inactives');
                            //控制自身菜单下子菜单隐藏
                            $(this).siblings('ul').slideUp(100);
                            //控制自身子菜单变成+号
                            $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
                            //控制自身菜单下子菜单隐藏
                            $(this).siblings('ul').children('li').children('ul').slideUp(100);

                            //控制同级菜单只保持一个是展开的（-号显示）
                            $(this).siblings('ul').children('li').children('a').removeClass('inactives');
                        }
                    })
                });
                //$('.list-unstyled').mouseout(function (){
                //$(this).find('#right_show').hide();
                //})
            </script>
        </div>
    </div>
    <div class="divider1 hidden-xs"></div>
    <div class="container pro-sec">
    </div>
</section>

<{volist name="productCats" id="item"}>
<section>
    <div class="container pro-sec">
        <div class="text-center center-block">
            <h1><{$item.name}></h1>
            <a href="<{php}> echo $query->U('index/product/funList/id/'.$item['id'],true);<{/php}>" class="more"><{:lang('See more')}></a>
            <p class="head-desc"><{$item.desc}></p>
            <div class="container  case_list">
                <div class="carousel slide" id="slider1" data-ride="carousel">
                    <div class="carousel-inner picScroll-left1" role="listbox">
                        <div class="item active">
                            <div class="row">

                                <{if condition="(!empty($item.sub))"}>
                                <{volist name="$item.sub" id="cat"}>
                                <div class="col-md-4 col-sm-4 col-xs-6 border-right-bold hover-fadeIn pd-0" >
                                    <div class="imgbox">
                                        <a href="<{php}> echo $query->U('index/product/funProductList/id/'.$cat['id']);<{/php}>"><img src="<{$cat.cover}>" alt="<{php}>echo $query->alt($cat['cover']);<{/php}>" class="img-responsive center-block"></a>
                                    </div>
                                    <div class="img-hover-a">
                                        <h3><a href="javascript:;"><{$cat.name}></a></h3>
                                    </div>

                                    <div class="img-hover">
                                        <div class="hover-text">
                                            <a href="<{php}> echo $query->U('index/product/funProductList/id/'.$cat['id'],true);<{/php}>"><{$cat.name}></a>
                                            <{if condition="(isset($products[$cat['id']]))"}>
                                            <{volist name="$products[$cat['id']]" id="in"}>
                                            <a href="<{php}> echo $query->U('index/product/product/id/'.$in,true);<{/php}>"><{$allProductsById[$in]['name']}></a>
                                            <{/volist}>
                                            <{/if}>

                                        </div>
                                    </div>
                                </div>
                                <{/volist}>
                                <{/if}>
                            </div>
                        </div>
                        <div class="hd">
                            <a class="left page-control next" role="button" data-slide="prev"> <span class="about-arrow"><img src="/static/images/arrow_left.jpg" alt="<{php}>echo $query->alt('/static/images/arrow_left.jpg');<{/php}>"/> </span> </a>
                            <a class="right page-control prev"  role="button" data-slide="next"> <span class="about-arrow"><img src="/static/images/arrow_right.jpg" alt="<{php}>echo $query->alt('/static/images/arrow_right.jpg');<{/php}>" /></span> </a>  </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<{/volist}>

<script type="text/javascript">
    jQuery(".picScroll-left1 ").slide({titCell:".hd ul",mainCell:".item .row",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3,trigger:"click"});
</script>



<{include file="../template/public/sidebar.html"}>
<{include file="../template/public/foot.html"}>